import { ScrollView, View, Text, Textarea, Picker, Image, Input } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import ChooseImageView from '@/pages/common/image-upload/choose-image-view';
import api from 'api';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      problems: '', //描述
      imgList: [], //图片
      contact: '', //电话
    };
  }

  componentDidMount() { }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  onDetailFileChange = (detailFiles) => {
    this.setState(
      {
        detailFiles,
      },
      () => {
        let imgList = [];
        detailFiles.map((item) => {
          imgList.push(item.url);
        });
        this.setState({ imgList });
        console.log(this.state.detailFiles);
      },
    );
  };

  async addFeedback() {
    const { imgList, problems, contact } = this.state;
    let userInfo = Taro.getStorageSync('b2b-wechat@login').user;
    if (problems.trim() == '') {
      Taro.showToast({
        title: '请填写问题描述！',
        icon: 'none',
        duration: 2000,
      });
      return false;
    }
    if (imgList.length == 0) {
      Taro.showToast({
        title: '请上传图片！',
        icon: 'none',
        duration: 2000,
      });
      return false;
    }

    if (contact.trim() == '') {
      Taro.showToast({
        title: '请填写联系电话！',
        icon: 'none',
        duration: 2000,
      });
      return false;
    }
    const reg = /^1[3456789]\d{9}$/;
    if (!reg.test(contact)) {
      Taro.showToast({
        title: '请输入正确的手机号！',
        icon: 'none',
        duration: 2000,
      });
      return false;
    }
    Taro.showLoading({
      title: '提交中...',
    });
    let params = {
      userId: userInfo.id,
      phone: contact,
      content: problems,
      backImage: imgList,
    };
    let res = await api.userCenterController.addFeedback(params);
    Taro.hideLoading();
    if (res.success) {
      Taro.showToast({
        title: '提交成功！',
        icon: 'none',
        duration: 2000,
      });
      Taro.navigateBack();
    }
  }

  render() {
    let { problems, imgList, contact } = this.state;
    let detailImages = [];
    imgList.map((item) => {
      detailImages.push({ url: item });
    });
    return (
      <ScrollView className="packageCAddFeedback" scrollY>
        <View className="titleStyle">问题描述</View>
        <View className="form">
          <Textarea
            placeholderStyle="color:#BFBFBF;"
            className="textarea"
            autoHeight
            maxlength={200}
            placeholder="请输入问题详情，以便我们更好的处理。"
            value={problems ? problems.substring(0, 200) : ''}
            onInput={(e) => {
              let sss = problems;
              sss = e.detail.value;
              if (sss.length >= 200) {
                sss = sss.substring(0, 200);
                Taro.showToast({
                  title: '字数已达上限',
                  icon: 'none',
                  duration: 2000,
                });
              }
              this.setState({
                problems: sss,
              });
            }}
          />
        </View>
        <View className="length">{problems.length}/200</View>
        <View className="imgStyle"> 上传凭证（提供问题截图）</View>
        <ChooseImageView files={detailImages} maxCount="3" onFileChange={this.onDetailFileChange.bind(this)} />
        <View className="select-label">联系电话</View>
        <View className="row">
          <Input
            className="mess-text"
            maxlength={11}
            type="number"
            placeholder="请输入您的手机号"
            placeholder-style="color:#999999;"
            onInput={(e) => {
              this.setState({ contact: e.detail.value });
            }}
          />
        </View>
        <View className="bottom">
          <View className="btn_box">
            <Text
              className="btn-release"
              onClick={() => {
                this.addFeedback();
              }}
            >
              立即提交
            </Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}
